<template>
  <div class="user-container">
    <el-card>
      <div class="card-header">
        <h2>用户管理</h2>
        <div class="header-actions">
          <el-input 
            v-model="searchQuery" 
            placeholder="搜索用户..." 
            size="small" 
            prefix-icon="Search"
            class="search-input"
          />
          <el-button type="primary" size="small" icon="Plus">新增用户</el-button>
        </div>
      </div>
      
      <el-table 
        :data="userList" 
        border 
        style="width: 100%; margin-top: 15px;"
      >
        <el-table-column 
          type="selection" 
          width="55" 
        />
        <el-table-column 
          prop="id" 
          label="ID" 
          width="80" 
        />
        <el-table-column 
          prop="username" 
          label="用户名" 
        />
        <el-table-column 
          prop="name" 
          label="姓名" 
        />
        <el-table-column 
          prop="email" 
          label="邮箱" 
        />
        <el-table-column 
          prop="phone" 
          label="电话" 
        />
        <el-table-column 
          prop="status" 
          label="状态" 
          width="100"
        >
          <template #default="scope">
            <el-switch 
              v-model="scope.row.status" 
              :active-value="1" 
              :inactive-value="0"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column 
          prop="createTime" 
          label="创建时间" 
        />
        <el-table-column 
          label="操作" 
          width="180"
        >
          <template #default="scope">
            <el-button 
              size="small" 
              type="text" 
              icon="Edit"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button 
              size="small" 
              type="text" 
              icon="Delete"
              text-color="#ff4d4f"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 搜索条件
const searchQuery = ref('')

// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 用户列表数据
const userList = ref([])

// 模拟获取用户列表
const getUserList = () => {
  // 模拟数据
  const mockData = []
  for (let i = 0; i < pageSize.value; i++) {
    const index = (currentPage.value - 1) * pageSize.value + i + 1
    mockData.push({
      id: index,
      username: `user${index}`,
      name: `用户${index}`,
      email: `user${index}@example.com`,
      phone: `1380013800${i % 10}`,
      status: index % 3 !== 0 ? 1 : 0,
      createTime: `2023-0${Math.floor(Math.random() * 9) + 1}-${Math.floor(Math.random() * 28) + 1}`
    })
  }
  
  userList.value = mockData
  total.value = 100 // 模拟总条数
}

// 页面加载时获取数据
onMounted(() => {
  getUserList()
})

// 分页大小变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  getUserList()
}

// 当前页变化
const handleCurrentChange = (page) => {
  currentPage.value = page
  getUserList()
}

// 状态切换
const handleStatusChange = (row) => {
  ElMessage.success(`用户 ${row.username} 状态已切换为 ${row.status ? '启用' : '禁用'}`)
}

// 编辑用户
const handleEdit = (row) => {
  ElMessage.info(`编辑用户 ${row.username}`)
}

// 删除用户
const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除', `确定要删除用户 ${row.username} 吗？`, { type: 'warning' })
      .then(() => {
        ElMessage.success('删除成功')
      // 实际应用中这里应该调用API删除用户并刷新列表
    })
    .catch(() => {
      // 取消删除
    })
}
</script>

<style scoped lang="scss">
.user-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h2 {
      font-size: 18px;
      color: #1d2129;
      margin: 0;
    }
    
    .header-actions {
      display: flex;
      gap: 10px;
      
      .search-input {
        width: 200px;
      }
    }
  }
  
  .pagination-container {
    margin-top: 15px;
    text-align: right;
  }
}
</style>
